<template>
	<view>
		<!-- 大分类标签 -->
		<uni-collapse v-if="tags">
			<uni-collapse-item :title="tags[current].cate_name" open>
				<uni-tag
					style="display: inline-block;margin:10rpx"
					v-for="(item, index) in tags"
					:key="index"
					:text="item.cate_name"
					type="warning"
					:inverted="current == index ? false : true"
					@click="doCheck(index)"
				></uni-tag>
			</uni-collapse-item>
		</uni-collapse>
		<!-- 分类宫格布局 -->
		<uni-grid
			:column="3"
			:showBorder="false"
			:highlight="false"
			:square="false"
			v-if="cates"
		>
			<uni-grid-item v-for="(item, index) in cates" :key="index">
				<view
					@click="goRooms(index)"
					style="padding: 10rpx;border-radius: 10px;"
				>
					<image
						:src="item.pic_name"
						style="width: 100%;height: 300rpx;"
					></image>
					<view>{{ item.tag_name }}</view>
				</view>
			</uni-grid-item>
		</uni-grid>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// 分类标签
			tags: null,
			// 默认选中标签的下标
			current: 0,
			// 小分类
			cates: null
		};
	},
	mounted() {
		this.getTags();
	},
	methods: {
		// 跳转到直播房间列表
		goRooms(index) {
			// 后续的直播列表页面 需要使用到shortName[请求接口的关键参数]和tag_name[显示在头部导航的文字]
			const { short_name, tag_name } = this.cates[index];
			console.log(short_name, tag_name); 
			// 传参
			// '' ""  ``
			uni.navigateTo({
				url: `../rooms/rooms?short_name=${short_name}&tag_name=${tag_name}`
			});
		},
		// 切换分类tag
		doCheck(index) {
			this.current = index;
			this.getCate(index);
		},
		// 获取分类标签下的分类
		getCate(index) {
			const shortName = this.tags[index].short_name;
			// #ifndef H5
			const url =
				'http://capi.douyucdn.cn/api/v1/getColumnDetail?shortName=' +
				shortName;
			// #endif
			// #ifdef H5
			const url = '/capi/api/v1/getColumnDetail?shortName=' + shortName;
			// #endif
			uni.request({
				url,
				method: 'GET',
				data: {},
				success: res => {
					console.log(res);
					this.cates = res.data.data;
				},
				fail: () => {},
				complete: () => {}
			});
		},
		// 获取分类标签
		getTags() {
			// H5浏览器跨域  其它终端跨域
			// #ifndef H5
			const url = 'http://capi.douyucdn.cn/api/v1/getColumnList';
			// #endif
			// #ifdef H5
			// 浏览器端  通过proxy代理跨域  需要写标识信息 /capi
			const url = '/capi/api/v1/getColumnList';
			// #endif
			uni.request({
				url,
				method: 'GET',
				data: {},
				success: res => {
					console.log(res);
					this.tags = res.data.data;
					// 默认调取第一个tag的分类数据
					this.getCate(0);
				},
				fail: () => {},
				complete: () => {}
			});
		}
	},
	computed: {
		my_cates() {
			// 数组截取60个元素
			let arr = this.cates.splice(0, 60);
			console.log(arr.length);
			return arr;
		}
	}
};
</script>

<style></style>
